<template>
  <div class="meter-overview-container">
    <!-- 页面头部：标题+日期+操作按钮 -->
    <div class="header-bar">
      <h2 class="page-title">
        水表流量概览
        <!-- 当前日期：使用dayjs格式化 -->
        <span class="current-date">({{ dayjs().format('YYYY-MM-DD') }})</span>
      </h2>
      <div class="operate-btns">
        <el-button
            type="primary"
            icon="Refresh"
            @click="handleRefresh"
            :loading="loading"
        >
          刷新
        </el-button>
        <el-button
            type="default"
            icon="Print"
            @click="handlePrint"
        >
          打印
        </el-button>
      </div>
    </div>

    <!-- 加载状态 -->
    <el-loading
        v-if="loading"
        text="数据加载中..."
        class="loading-container"
    ></el-loading>

    <!-- 水表卡片容器 -->
    <div class="card-grid" v-else>
      <el-card
          v-for="element in elementList"
          :key="element.id"
          class="meter-card"
      >
        <!-- 卡片标题：水表名称 -->
        <template #header>
          <div class="card-header">
            <span class="meter-name">{{ element.elemName || '未知水表' }}</span>
          </div>
        </template>

        <!-- 卡片内容：用水数据 -->
        <div class="card-content">
          <!-- 昨日用水 -->
          <div class="data-item">
            <span class="data-label">昨日用水：</span>
            <span class="data-value">
              {{ getAnalyseData(element.id)?.todayUsage || '-' }}
              <span class="unit"> (吨)</span>
            </span>
          </div>

          <!-- 最小流量 -->
          <div class="data-item">
            <span class="data-label">最小流量：</span>
            <span class="data-value">
              {{ getAnalyseData(element.id)?.todayMinVal || '-' }}
              <span class="unit"> (吨/小时)</span>
            </span>
          </div>

          <!-- 更新时间：使用dayjs格式化，处理无效日期 -->
          <div class="data-item">
            <span class="data-label">更新时间：</span>
            <span class="data-value">
              {{ formatDate(getAnalyseData(element.id)?.recordTime) }}
            </span>
          </div>

          <!-- 告警状态：添加点击事件，可跳转 -->
          <div class="data-item">
            <span class="data-label">告警状态：</span>
            <!-- 核心修改：添加@click跳转，样式改为指针 -->
            <span
                class="data-value warn-count"
                @click="handleGoToAlarm(element)"
                style="cursor: pointer; text-decoration: underline;"
            >
              {{ warnCountMap[element.id] || 0 }}次告警（近一个月）
            </span>
          </div>
        </div>
      </el-card>

      <!-- 无数据提示 -->
      <div class="empty-tip" v-if="elementList.length === 0">
        暂无水表数据
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElCard, ElButton, ElIcon, ElLoading, ElMessage } from 'element-plus'
// 引入dayjs
import dayjs from 'dayjs'
// 核心新增：导入路由钩子，用于跳转
import { useRouter } from 'vue-router'

// 核心新增：创建路由实例
const router = useRouter()

// 引入API接口
import { listElement } from '@/api/water/element'
import { listMeterAnalyse } from '@/api/water/meterAnalyse'
import { listMeterWarn } from '@/api/water/meterWarn'

// 响应式数据
const elementList = ref([]) // 水表列表（element表数据）
const meterAnalyseMap = ref({}) // 水表分析数据映射：key=meterId，value=analyse对象
const warnCountMap = ref({}) // 水表告警数映射：key=meterId，value=告警次数
const loading = ref(false) // 加载状态

/**
 * 获取昨天日期（格式：YYYY-MM-DD，匹配后端analyseDate字段）
 * @returns {string} 昨天的日期字符串
 */
const getYesterdayDate = () => {
  return dayjs().subtract(1, 'day').format('YYYY-MM-DD')
}

/**
 * 用dayjs格式化日期（支持空值/无效日期处理）
 * @param {string/Date} date - 待格式化的日期（后端返回可能是字符串或Date对象）
 * @param {string} format - 目标格式（默认：YYYY-MM-DD HH:mm:ss）
 * @returns {string} 格式化后的日期，无效日期返回空字符串
 */
const formatDate = (date, format = 'YYYY-MM-DD HH:mm:ss') => {
  // 处理空值或无效日期（避免显示Invalid Date）
  if (!date || !dayjs(date).isValid()) {
    return ''
  }
  return dayjs(date).format(format)
}

/**
 * 获取过去一个月的开始和结束日期（格式：YYYY-MM-DD）
 * @returns {object} 包含startTime和endTime的对象
 */
const getLastMonthRange = () => {
  const end = dayjs(); // 当前日期
  const start = dayjs().subtract(1, 'month'); // 一个月前日期
  return {
    startTime: start.format('YYYY-MM-DD'),
    endTime: end.format('YYYY-MM-DD')
  };
};

/**
 * 循环分页获取所有水表（listElement是分页接口）
 * @returns {Promise<Array>} 所有水表的数组
 */
const getAllElements = async () => {
  const allElements = [] // 存储所有水表
  const pageSize = 20 // 每页条数（可根据后端性能调整，建议10-50）
  let pageNum = 1 // 起始页码
  let total = 0 // 总数据量

  do {
    try {
      // 1. 请求当前页的水表数据（传分页参数）
      const res = await listElement({
        pageNum: pageNum,
        pageSize: pageSize
      })

      // 2. 第一次请求时获取总条数
      if (pageNum === 1) {
        total = res.total || 0
      }

      // 3. 累加当前页数据
      if (res.rows && res.rows.length > 0) {
        allElements.push(...res.rows)
      }

      // 4. 页码自增，直到获取完所有数据（当前累计条数 >= 总条数）
      pageNum++
    } catch (error) {
      ElMessage.error(`获取第${pageNum}页水表数据失败：${error.message}`)
      break // 失败时中断循环，避免无限请求
    }
  } while (allElements.length < total) // 循环条件：累计数据 < 总条数

  return allElements
}

/**
 * 加载所有数据
 */
const loadAllData = async () => {
  loading.value = true
  try {
    // 1. 获取所有水表（而非默认第一页）
    const allElements = await getAllElements()
    elementList.value = allElements

    if (elementList.value.length === 0) return

    // 2. 获取昨日用水分析数据
    const yesterday = getYesterdayDate()
    const analysePromises = elementList.value.map(element =>
        listMeterAnalyse({
          meterId: element.id,
          startTime: yesterday,
          endTime: yesterday
        })
    )
    const analyseResList = await Promise.all(analysePromises)

    analyseResList.forEach((res, index) => {
      const element = elementList.value[index]
      const analyseData = res.rows && res.rows.length > 0 ? res.rows[0] : null
      meterAnalyseMap.value[element.id] = analyseData
    })

    // 3. 获取过去一个月的告警数据
    const { startTime, endTime } = getLastMonthRange();
    const warnPromises = elementList.value.map(element =>
        listMeterWarn({
          meterId: element.id,
          warnTimeStart: startTime,
          warnTimeEnd: endTime
        })
    )
    const warnResList = await Promise.all(warnPromises)

    warnResList.forEach((res, index) => {
      const element = elementList.value[index]
      warnCountMap.value[element.id] = res.rows ? res.rows.length : 0
    })

  } catch (error) {
    ElMessage.error('数据加载失败：' + (error.message || '未知错误'))
    console.error('数据加载异常：', error)
  } finally {
    loading.value = false
  }
}

/**
 * 根据水表ID获取分析数据
 * @param {number} meterId - 水表ID（element.id）
 * @returns {object|null} 分析数据对象
 */
const getAnalyseData = (meterId) => {
  return meterAnalyseMap.value[meterId] || null
}

/**
 * 刷新按钮事件
 */
const handleRefresh = () => {
  meterAnalyseMap.value = {}
  warnCountMap.value = {}
  loadAllData()
}

/**
 * 打印按钮事件
 */
const handlePrint = () => {
  // 隐藏打印不需要的元素
  const style = document.createElement('style')
  style.textContent = `
    @media print {
      .operate-btns, .el-loading, .empty-tip { display: none !important; }
      .meter-overview-container { padding: 0 !important; }
      .card-grid { gap: 8px !important; }
      .meter-card { page-break-inside: avoid; }
    }
  `
  document.head.appendChild(style)

  // 执行打印
  window.print()

  // 移除临时样式
  document.head.removeChild(style)
}

/**
 * 核心新增：点击告警状态跳转到设备告警页面
 * @param {object} element - 当前水表对象（包含elemName等信息）
 */
const handleGoToAlarm = (element) => {
  // 1. 获取近一个月的日期范围（与告警数统计范围一致）
  const { startTime, endTime } = getLastMonthRange()
  // 2. 跳转到设备告警页面，传递参数：水表名、日期范围
  router.push({
    path: '/workbench/trafficalarm', // 目标页面地址
    query: {
      elemName: element.elemName || '未知水表', // 水表名
      warnTimeStart: startTime, // 告警开始日期（近一个月前）
      warnTimeEnd: endTime // 告警结束日期（当前）
    }
  })
}

// 页面挂载时加载数据
onMounted(() => {
  loadAllData()
})
</script>

<style scoped>
/* 样式部分与之前完全一致，无需修改 */
.meter-overview-container {
  padding: 16px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 64px); /* 适配顶部导航栏高度 */
}

.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.current-date {
  font-size: 14px;
  font-weight: normal;
  color: #6b7280;
  margin-left: 8px;
}

.operate-btns {
  display: flex;
  gap: 8px;
}

.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.meter-card {
  width: calc(25% - 12px); /* 一行4个卡片 */
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
}

.meter-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.card-header {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}

.meter-name {
  font-size: 16px;
  font-weight: 500;
  color: #1f2937;
}

.card-content {
  padding: 16px;
  line-height: 2;
}

.data-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.data-label {
  color: #6b7280;
}

.data-value {
  color: #1f2937;
  font-weight: 500;
}

.unit {
  font-size: 12px;
  color: #6b7280;
  font-weight: normal;
  margin-left: 4px;
}

.warn-count {
  color: #dc2626; /* 告警数红色显示 */
}

.empty-tip {
  width: 100%;
  text-align: center;
  padding: 48px 0;
  color: #6b7280;
  font-size: 14px;
}

/* 响应式适配 */
@media (max-width: 1200px) {
  .meter-card {
    width: calc(33.33% - 12px); /* 一行3个卡片 */
  }
}

@media (max-width: 992px) {
  .meter-card {
    width: calc(50% - 8px); /* 一行2个卡片 */
  }
}

@media (max-width: 768px) {
  .meter-card {
    width: 100%; /* 一行1个卡片 */
  }

  .header-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style>